<template>
	<view class="kjrc">
		<view class="item" v-for="(item, index) in personType" :key="index">
			<view class="item_top">
				<view class="item_title">{{ item.name }}</view>
				<view class="item_num">
					<span class="number">{{ personNum[index] }}</span>
					个
				</view>
			</view>
			<view class="item_bottom">
				<u-line-progress :percent="percentageList[index]" :inactive-color="'rgba(112, 112, 112, 0.23)'" :show-percent="false" height="12"></u-line-progress>
			</view>
		</view>
	</view>
</template>

<script>
import uLineProgress from '@/components/u-line-progress/u-line-progress.vue';
import { getListCount } from '@/api/zhyp/statistics';
export default {
	data() {
		return {
			personType: [],
			personNum: [],
			percentageList: [],
			code: '6103'
		};
	},
	components: { uLineProgress },
	created() {
		this.getData();
	},
	methods: {
		percentage() {
			if (Math.max(...this.personNum) === 0) {
				this.personNum.map((item) => {
					this.percentageList.push(0);
				});
			} else {
				this.personNum.map((item) => {
					this.percentageList.push((item / Math.max(...this.personNum)) * 100);
				});
			}
		},
		async getData() {
			this.personNum = [];
			this.personType = [];
			this.percentageList = [];
			let data;
			if (this.code !== '6103') {
				data = { code: this.code };
			} else {
				data = null;
			}
			const res = await getListCount(data);
			res.data.forEach((i) => {
				this.personType.push({
					name: i.name,
					value: i.count,
					type: i.type
				});
				this.personNum.push(i.count);
			});
			this.percentage();
		}
	}
};
</script>

<style lang="scss">
.kjrc {
	.item {
		padding-top: 32rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		color: #fff;
		.item_top {
			margin-bottom: 12rpx;
			padding-right: 18rpx;
			display: flex;
			justify-content: space-between;
			font-size: 28rpx;
			.number {
				margin-right: 8rpx;
				font-size: 36rpx;
				font-weight: 700;
			}
		}
	}
}
::v-deep .u-active {
	background-color: unset !important;
	background-image: linear-gradient(to right, rgba(27, 126, 242, 0), rgba(27, 126, 242, 1));
}
</style>
